<template>
  <el-container class="layout-container-demo" style="height: 100vh">
    <el-aside width="200px">
		<MyAside></MyAside>
    </el-aside>

    <el-container>
      <el-header style="text-align: right; font-size: 12px">
        <el-switch class="switch" v-model="modelValue" @change="modelChange"/>
        <div class="toolbar">
          <el-dropdown @command="handleCommand">
            <el-icon style="margin-right: 8px; margin-top: 1px">
              <setting />
            </el-icon>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item command='1'>退出登录</el-dropdown-item>
                <el-dropdown-item command='2'>修改密码</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
          <span>{{mainStore.userInfo.user_name}}</span>
        </div>
      </el-header>
      <el-main>
		  
		  
        <el-scrollbar>
          <router-view v-slot="{ Component }">
            <keep-alive>
              <component :is="Component" />
            </keep-alive>
          </router-view>
        </el-scrollbar>
      </el-main>
    </el-container>
  </el-container>
  <UpdataPaassword v-model:show = 'show' v-if="comShow"></UpdataPaassword>
</template>

<script lang="ts" setup>
import UpdataPaassword from './UpdataPassword.vue'
import MyAside from './MyAside.vue'
import { ref } from 'vue'
import { Menu as IconMenu, Message, Setting } from '@element-plus/icons-vue'
// import { getCurrentInstance } from 'vue';
// const { proxy } = getCurrentInstance();
import { ElMessage } from 'element-plus';
import router from "@/router";
import { useMainStore } from '@/store/index.js';
const mainStore = useMainStore();


const modelValue = ref(false)
const modelChange = () => {
  console.log(modelValue.value);
  console.log(document.documentElement);
  
  // document.do
  document.documentElement.className =modelValue.value? 'dark':''
}
const show = ref(false)
const comShow = ref(false)

function handleCommand(com){
	console.log(com);
	if(com==1){
		mainStore.token = '';
		mainStore.userInfo = {};
		router.push('/login')
		ElMessage({
			message: '退出登录',
			type: 'success'
		})
	}
	if(com==2){
		show.value = true
		comShow.value = true
	}
}
function onClose(){
	comShow.value = false
}
</script>

<style scoped lang="less">
.layout-container-demo {
	.toolbar {
	  display: inline-flex;
	  align-items: center;
	  justify-content: center;
	  height: 100%;
	  right: 20px;
	}
	.el-aside {
	  color: var(--el-text-color-primary);
	  background: var(--el-color-primary-light-8);
	}
	.el-header {
	  position: relative;
	  background-color: var(--el-color-primary-light-7);
	  color: var(--el-text-color-primary);
	  display: flex;
	  justify-content: flex-end;
	  align-items: center;
	  .switch{
	    margin-right: 20px;
	    --el-switch-on-color: #c6e2ff; 
	    --el-switch-off-color: #213d5b;
	  }
	}
	.el-scrollbar__wrap{
		padding: 20px;
	}
}
</style>
